<template>
    <a-modal
        :title="!currRow ? '添加疑难解答' : '疑难解答'"
        :visible="isShowModal"
        width="40%"
        :footer="null"
        dialogClass="custom-modal"
        @cancel="handleCancel"
        :maskClosable="false"
    >
        <a-form-model
            :model="form"
            ref="form"
            :labelCol="{ span: 5 }"
            :wrapperCol="{ span: 19 }"
            :rules="rules"
            :colon="false"
        >
            <a-row :gutter="10">
                <a-col :span="24" class="mb16">
                    <a-form-model-item label="疑问" prop="title">
                        <div>
                            {{ form.title }}
                        </div>
                    </a-form-model-item>
                </a-col>
                <a-col :span="24" class="mb16">
                    <a-form-model-item label="解答" prop="content">
                        {{ form.content }}
                    </a-form-model-item>
                </a-col>
            </a-row>
        </a-form-model>
    </a-modal>
</template>
<script>
export default {
    name: 'qa-detail',
    data() {
        return {
            confirmLoading: false,
            form: {
                title: '',
                content: '',
            },
        }
    },
    components: {},
    props: {
        isShowModal: {
            required: true,
            type: Boolean,
        },
        currRow: {
            required: false,
            type: [Object, undefined],
        },
        enterpriseId: {
            required: true,
            type: String,
        },
    },
    watch: {
        isShowModal: {
            immediate: true,
            handler: function (isShowModal) {
                if (isShowModal) {
                    this.beforeShowModal()
                } else {
                    this.$refs.form && this.$refs.form.resetFields()
                }
            },
        },
    },
    beforeDestroy() {
        this.$refs.form && this.$refs.form.resetFields()
    },
    methods: {
        beforeShowModal() {
            if (this.currRow) {
                const { content, title } = this.currRow
                Object.assign(this.form, {
                    content,
                    title,
                })
            }
        },
        handleCancel() {
            this.$emit('update:isShowModal', false)
        },
    },
}
</script>
<style scoped></style>
